View GitHub Repository replayer

Schedule Inspection
Subscribe

MediaCard.tsx ➔ MediaCard   A
last analyzed

↳ Parent: src/components/MediaCard.tsx

Complexity

Conditions 1

Size

Total Lines 21
Code Lines 19

Duplication

Lines 0
Ratio 0 %

Importance

Changes 0
Metric Value
eloc 19
dl 0
loc 21
rs 9.45
c 0
b 0
f 0
cc 1
1 
import React, {MouseEvent} from "react";
2 
import {Card} from "react-bootstrap";
3 
import {Link} from "react-router-dom";
4 
import {getReadableDate} from "../utils";
5 
import {MediaResource} from "../interfaces";
6 
import "./MediaCard.css";
7 

            


            
                                                                        
                            
            
                                    
            
            

                
                    8
                

                                    
                                                    
                
                
                
function MediaCard(props: MediaResource): JSX.Element {

            


            
                                                                        
                            
            
                                    
            
            

                
                    9
                

                                    
                                                    
                
                
                

            


            
                                                                        
                            
            
                                    
            
            

                
                    10
                

                                    
                                                    
                
                
                
  const playVideo = (e: MouseEvent<HTMLVideoElement>) => {

            


            
                                                                        
                            
            
                                    
            
            

                
                    11
                

                                    
                                                    
                
                
                
    e.currentTarget.play();

            


            
                                                                        
                            
            
                                    
            
            

                
                    12
                

                                    
                                                    
                
                
                
  };

            


            
                                                                        
                            
            
                                    
            
            

                
                    13
                

                                    
                                                    
                
                
                

            


            
                                                                        
                            
            
                                    
            
            

                
                    14
                

                                    
                                                    
                
                
                
  const pauseVideo = (e: MouseEvent<HTMLVideoElement>) => {

            


            
                                                                        
                            
            
                                    
            
            

                
                    15
                

                                    
                                                    
                
                
                
    e.currentTarget.pause();

            


            
                                                                        
                            
            
                                    
            
            

                
                    16
                

                                    
                                                    
                
                
                
  };

            


            
                                                                        
                            
            
                                    
            
            

                
                    17
                

                                    
                                                    
                
                
                

            


            
                                                                        
                            
            
                                    
            
            

                
                    18
                

                                    
                                                    
                
                
                
  return (

            


            
                                                                        
                            
            
                                    
            
            

                
                    19
                

                                    
                                                    
                
                
                
    <Card className="media-card">

            


            
                                                                        
                            
            
                                    
            
            

                
                    20
                

                                    
                                                    
                
                
                
      {props.type.includes("video") &&

            


            
                                                                        
                            
            
                                    
            
            

                
                    21
                

                                    
                                                    
                
                
                
        <video className="card-preview" src={props.privateUrl} onMouseEnter={playVideo} onMouseLeave={pauseVideo} />}

            


            
                                                                        
                            
            
                                    
            
            

                
                    22
                

                                    
                                                    
                
                
                
      {props.type.includes("image") && <img className="card-preview" alt={props.name} src={props.privateUrl} />}

            


            
                                                                        
                            
            
                                    
            
            

                
                    23
                

                                    
                                                    
                
                
                
      <Link to={`/watch/${props.resourceId}`} className="card-body">

            


            
                                                                        
                            
            
                                    
            
            

                
                    24
                

                                    
                                                    
                
                
                
        <Card.Title>{props.name}</Card.Title>

            


            
                                                                        
                            
            
                                    
            
            

                
                    25
                

                                    
                                                    
                
                
                
        <Card.Text className="text">Uploaded on: {getReadableDate(props)}</Card.Text>

            


            
                                                                        
                            
            
                                    
            
            

                
                    26
                

                                    
                                                    
                
                
                
      </Link>

            


            
                                                                        
                            
            
                                    
            
            

                
                    27
                

                                    
                                                    
                
                
                
    </Card>

            


            
                                                                                                            
                            
            
                                    
            
            

                
                    28
                

                                    
                                                    
                
                
                
  );

            


            
                                                                                                            
                            
            
                                    
            
            

                
                    29
                

                                    
                                                    
                
                
                
}

            


            
                                                                                                            
                            
            
                                    
            
            

                
                    30
                

                                    
                                                    
                
                
                

            


            
                                                                                                            
                                                                
            
                                    
            
            

                
                    31
                

                                    
                                                    
                
                
                
export default MediaCard;

            


            
                                                        
            
                                    
            
            

                
                    32